/* color palette from <https://github.com/vuejs/theme> */
:root {
  --vt-c-white: #f2f2f2;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #ffffff;

  --vt-c-black: #141218;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;
  --vt-c-black-haed: #161c23;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}

/* semantic color variables for this project */
:root {
  /* 背景颜色 */
  --color-background: var(--vt-c-white-mute); /* 主背景色 */
  --color-background-soft: var(--vt-c-white-soft); /* 次要区域背景色 */
  --color-background-mute: var(--vt-c-white-mute); /* 轻微背景色，用于分隔区域 */
  --color-background-haed: var(--vt-c-white); /* 顶部栏或标题区域背景色 */
  --color-border: var(--vt-c-divider-light-2); /* 边框颜色 */
  --color-border-hover: var(--vt-c-divider-light-1); /* 悬停时的边框颜色 */

  /* 文本颜色 */
  --color-heading: var(--vt-c-text-light-1); /* 主要标题颜色 */
  --color-text: var(--vt-c-text-light-1); /* 正文颜色 */
  --color-text-muted: var(--vt-c-text-light-2); /* 次要文本或注释的颜色 */

  /* 强调颜色 */
  --color-accent: #0073e6; /* 按钮、链接、重要操作的主色调 */
  --color-accent-hover: #005bb5; /* 鼠标悬停时的强调色 */
  --color-accent-background: rgba(0, 115, 230, 0.1); /* 按钮等强调元素的背景色 */

  /* 阴影效果 */
  --color-shadow-light: rgba(0, 0, 0, 0.1); /* 浅色阴影 */
  --color-shadow-heavy: rgba(0, 0, 0, 0.25); /* 深色阴影 */

  /* 按钮颜色 */
  --color-button-primary: #0073e6; /* 主按钮背景色 */
  --color-button-primary-hover: #005bb5; /* 主按钮悬停时的背景色 */
  --color-button-primary-text: #ffffff; /* 主按钮文字颜色 */
  --color-button-secondary: #f1f3f4; /* 次级按钮背景色 */
  --color-button-secondary-hover: #e0e0e0; /* 次级按钮悬停时的背景色 */
  --color-button-secondary-text: #000000; /* 次级按钮文字颜色 */

  /* 链接颜色 */
  --color-link: #0073e6; /* 链接颜色 */
  --color-link-hover: #005bb5; /* 链接悬停时的颜色 */

  /* 区块间距 */
  --section-gap: 160px; /* 页面区块之间的默认间距 */
}

:root[class='dark'] {
  /* 背景颜色 */
  --color-background: var(--vt-c-black); /* 主背景色 */
  --color-background-soft: var(--vt-c-black-soft); /* 次要区域背景色 */
  --color-background-mute: var(--vt-c-black-mute); /* 轻微背景色，用于分隔区域 */
  --color-background-haed: var(--vt-c-black-haed); /* 顶部栏或标题区域背景色 */
  --color-border: var(--vt-c-divider-dark-2); /* 边框颜色 */
  --color-border-hover: var(--vt-c-divider-dark-1); /* 悬停时的边框颜色 */

  /* 文本颜色 */
  --color-heading: var(--vt-c-text-dark-1); /* 主要标题颜色 */
  --color-text: var(--vt-c-text-dark-1); /* 正文颜色 */
  --color-text-muted: var(--vt-c-text-dark-2); /* 次要文本或注释的颜色 */

  /* 强调颜色 */
  --color-accent: #4a90e2; /* 按钮、链接、重要操作的主色调 */
  --color-accent-hover: #357ab8; /* 鼠标悬停时的强调色 */
  --color-accent-background: rgba(74, 144, 226, 0.1); /* 按钮等强调元素的背景色 */

  /* 阴影效果 */
  --color-shadow-light: rgba(255, 255, 255, 0.1); /* 浅色阴影 */
  --color-shadow-heavy: rgba(0, 0, 0, 0.6); /* 深色阴影 */

  /* 按钮颜色 */
  --color-button-primary: #4a90e2; /* 主按钮背景色 */
  --color-button-primary-hover: #357ab8; /* 主按钮悬停时的背景色 */
  --color-button-primary-text: #ffffff; /* 主按钮文字颜色 */
  --color-button-secondary: #2b2b2b; /* 次级按钮背景色 */
  --color-button-secondary-hover: #3c3c3c; /* 次级按钮悬停时的背景色 */
  --color-button-secondary-text: #ffffff; /* 次级按钮文字颜色 */

  /* 链接颜色 */
  --color-link: #4a90e2; /* 链接颜色 */
  --color-link-hover: #357ab8; /* 链接悬停时的颜色 */

  /* 区块间距 */
  --section-gap: 160px; /* 页面区块之间的默认间距 */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  /* min-height: 100vh; */
  color: var(--color-text);
  background: var(--color-background);
  transition: color 1s, background-color 0.5s ease;
  line-height: 1.6;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 自定义滚动条的整体样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: var(--vt-c-divider-light-1); /* 白天模式：浅灰色 */
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* 黑夜模式下的滚动条滑块颜色 */
:root[class='dark'] ::-webkit-scrollbar-thumb {
  background-color: var(--color-text); /* 黑夜模式：浅色文本 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: var(--color-background-soft); /* 白天模式：略深的背景色 */
  border-radius: 10px;
}

/* 黑夜模式下的滚动条轨道颜色 */
:root[class='dark'] ::-webkit-scrollbar-track {
  background-color: var(--color-background-haed); /* 黑夜模式：深色背景 */
}

/* 当鼠标悬停在滑块上时改变颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-accent-hover); /* 悬停时的颜色 */
}

/* 当滚动条处于活动状态时的样式 */
::-webkit-scrollbar-thumb:active {
  background-color: var(--color-accent); /* 活动时的颜色 */
}
